<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
	Demo application showing The CssClassStore.
-->
<html>
<head>
	<title>Demo:  dojox.data.CssClassStore</title>
	<style type="text/css">
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/tests/css/dijitTests.css";
  		@import "../../grid/resources/tundraGrid.css";
	</style>

	<!--
		The following script tag instantiates the dojo library and sets some basic properties.  In this case, the application
		is told that debug mode is off, and to parse all dojoType widgets when it has fully loaded.
	-->
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
	<script>
		dojo.require("dijit.Tree");
		dojo.require("dijit.tree.ForestStoreModel");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dojox.data.CssRuleStore");
		dojo.require("dojox.data.CssClassStore");
		dojo.require("dojox.grid.DataGrid");

		var layoutCss = [
			[
				{ field: "selector", name: "Selector", width: 20 },
				{ field: "parentStyleSheetHref", name: "StyleSheet", width: 20 },
				{ field: "cssText", name: "CSS", width: 'auto' }
			]
		];

		function init() {
			var combo = dijit.byId("classCombo");
			var grid = dijit.byId("cssGrid");
			
			function requery() {
				var val = combo.getValue();
				val = "." + val;
				var query = {
					selector: "*" + val + "*"
				}
				grid.filter(query,true);
			}
			dojo.connect(combo, "onChange", requery);
		}
		dojo.addOnLoad(init);

	</script>
</head>

<body class="tundra">
	<h1>
		Demo:  Demo of using the Css Stores to browse the loaded CSS classes and associated rules.
	</h1>
	<p>This demo demonstrates hooking up the Css*Stores to the various digit widgets to browse the Css loaded for the page.</p>
	<hr>

	<div dojoType="dojox.data.CssRuleStore" jsId="ruleStore"></div>
	<div dojoType="dojox.data.CssClassStore" jsId="classStore"></div>
	

	<div dojoType="dijit.tree.ForestStoreModel" 
		 jsId="classModel" 
		 store="classStore" 
		 query="{}"
		 rootId="Loaded Classes" 
		 rootLabel="Loaded Classes" 
		 childrenAttrs="children">
	</div>

	<h2>dojox.data.CssClassStore connected to ComboBox and querying on classSans:</h2>
	<div id="classCombo" dojoType="dijit.form.ComboBox"  store="classStore" searchAttr="classSans"></div> 

	<h2>dojox.data.CssRuleStore:</h2>
	<i>Displays the list of CSS rules filtered by the class selected in the ComboBox.</i>
	<div id="cssGrid"
		 jsId="cssGrid" 
		 dojoType="dojox.grid.DataGrid" 
		 query="{}" 
		 rowsPerPage="20"
		 store="ruleStore" 
		 structure="layoutCss"
		 style="width: 100%; height: 400px;">
	</div>

	<h2>dojox.data.CssClassStore connected to Tree:</h2>
	<span id="tree" dojoType="dijit.Tree" model="classModel"> </span>
	<hr>
</body>
</html>
